<template>
  <div class="dynamic-form-container layout-pd">
    <el-card shadow="hover" header="动态复杂表单">
      <el-form :model="state.form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
        <el-row :gutter="35">
          <el-col
            :xs="val.xs"
            :sm="val.sm"
            :md="val.md"
            :lg="val.md"
            :xl="val.xl"
            class="mb20"
            v-show="val.isShow"
            v-for="(val, key) in formData"
            :key="key"
          >
            <template v-if="val.type !== ''">
              <el-form-item
                :label="val.label"
                :prop="val.prop"
                :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
                v-if="val.type !== ''"
              >
                <el-input
                  v-model="state.form[val.prop]"
                  :placeholder="val.placeholder"
                  clearable
                  v-if="val.type === 'input'"
                  style="width: 100%"
                  :disabled="val.disabled"
                ></el-input>
                <el-date-picker
                  v-model="state.form[val.prop]"
                  type="date"
                  :placeholder="val.placeholder"
                  v-else-if="val.type === 'date'"
                  style="width: 100%"
                  :disabled="val.disabled"
                >
                </el-date-picker>
                <el-select
                  v-model="state.form[val.prop]"
                  :placeholder="val.placeholder"
                  v-else-if="val.type === 'select'"
                  style="width: 100%"
                  :disabled="val.disabled"
                >
                  <el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <el-input
                  type="textarea"
                  v-model="state.form[val.prop]"
                  :placeholder="val.placeholder"
                  clearable
                  v-if="val.type === 'textarea'"
                  style="width: 100%"
                  :disabled="val.disabled"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-row :gutter="35" v-for="(v, k) in state.form.list" :key="k">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
                    <template #label>
                      <el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
                        <el-icon>
                          <ele-Plus />
                        </el-icon>
                      </el-button>
                      <el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
                        <el-icon>
                          <ele-Delete />
                        </el-icon>
                      </el-button>
                      <span class="ml10">年度</span>
                    </template>
                    <el-input v-model="state.form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="state.form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="state.form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row class="flex mt15">
      <div class="flex-margin">
        <el-button size="default" @click="onResetForm(formRulesOneRef)">
          <el-icon>
            <ele-RefreshRight />
          </el-icon>
          重置表单
        </el-button>
        <el-button size="default" type="primary" @click="onSubmitForm(formRulesOneRef)">
          <SvgIcon name="iconfont icon-shuxing" />
          验证表单
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="example/pagesDynamicForm">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { formData } from './mock'

// 定义变量内容
const formRulesOneRef = ref<FormInstance>()
const state = reactive({
  formData,
  form: {
    name: '',
    email: '',
    autograph: '',
    occupation: '',
    list: [
      {
        year: '',
        month: '',
        day: '',
      },
    ],
    remarks: '',
  },
})

// 新增行
const onAddRow = () => {
  state.form.list.push({
    year: '',
    month: '',
    day: '',
  })
}
// 删除行
const onDelRow = (k: number) => {
  state.form.list.splice(k, 1)
}
// 表单验证
const onSubmitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('验证成功')
    } else {
      return false
    }
  })
}
// 重置表单
const onResetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
